<template>
	<view class="uni-list">
		<view class="uni-list-cell" hover-class="uni-list-cell-hover" v-for="(item,index) in productList" :key="index">
			<view class="uni-media-list">
				<image class="uni-media-list-logo" :src="item.img"></image>
				<view class="uni-media-list-body">
					<view class="uni-ellipsis-2">{{item.title}}</view>
					<view>{{item.seller_count}}</view>
					<view style="width: 100%; justify-content: space-between;">
						<view>
							<view>￥{{item.price/100}}</view>
							<view class="uni-text-discount uni-text-red">￥{{item.origin_price/100}}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	var self; //定义指向VUE实例的this指针
	export default {
		data: {
			shopId: '682731',
			productList: [], //保存已经加载的商品列表信息
		},
		methods: {},

		onLoad: function(e) {
			self = this;
			let apiBase = 'https://api.beidian.com/mroute.html';
			let api = `${apiBase}?method=beidian.h5.shop.product.list&page=1&shop_id=${this.shopId}`;
			uni.request({
				url: api,
				success: function(res) {
					const data = res.data;
					self.productList = data.shop_products;
					console.log(self.productList);
				}
			})
		}
	}
</script>

<style>
	page view {
		display: flex;
		flex-direction: row;
	}

	.uni-media-list-logo {
		height: 200upx;
		width: 200upx;
	}

	.uni-media-list-body {
		font-size: 30upx;
		height: 200upx;
		display: flex;
		flex: 1;
		flex-direction: column;
	}
</style>
